﻿@section header{
    <style>
        .table-warp > table {
            width: 100%;
        }

            .table-warp > table > tbody > tr > th,
            .table-warp > table > tbody > tr > td {
                border: 1px solid #ddd;
                padding: 6px;
            }

            .table-warp > table > tbody > tr > th {
                text-align: center;
            }

            .table-warp > table > tbody > tr > td {
                text-align: center;
            }

                .table-warp > table > tbody > tr > td > input, select, textarea {
                    width: 100%;
                    height: 28px;
                    border: 1px solid #ddd;
                }

                .table-warp > table > tbody > tr > td > .btn-del {
                    display: inline-block;
                    width: 28px;
                    height: 28px;
                    line-height: 28px;
                    background-color: red;
                    color: #fff;
                    text-align: center;
                    border-radius: 4px;
                    cursor: pointer;
                }
    </style>
}
<div class="ui-layout" id="Attendance" style="height: 100%; width: 100%;">
    <div class="content-zl">
        <div class="content-title">
            <i class="glyphicon glyphicon-th fl" style="margin-left:10px;margin-right:5px;line-height:26px;margin-top:-1px;"></i><span class="fl">列表区</span>
        </div>
        <div class="btn-area">
            <div class="toolbar">
                <div class="fr">
                    <a id="NF-add" class="btn btn-primary" onclick="AddTr('','','')"><i class="glyphicon glyphicon-plus"></i>&nbsp;新增</a>
                </div>
                <script>$('.toolbar').authorizeButton()</script>
            </div>
        </div>
        <div class="table-warp">
            <table>
            </table>
        </div>
    </div>
</div>
@section scripts{
    <script>
        var baseUrl = "/Sys/DivSearc/";
        $(function () {
            AddTr('', '', '');
        })

        //新增表格行
        function AddTr(fieldName, fieldOperate, fieldValue) {
            var trHtml = '';
            if (fieldName == "" || fieldOperate == "" || fieldValue == "") {
                var trL = $(".table-warp>table>tbody>tr").length;
                trHtml += '<tr><td>' + trL + '</td>';
                trHtml += '<td><select id="fieldName' + trL + '" name="fieldName' + trL + '"><option value = "学校"> 学校</option><option value="专业">专业</option><option value="学位">学位</option></select ></td>';
                trHtml += '<td><select id="fieldOperate' + trL + '" name="fieldOperate' + trL + '"><option value="="> 等于</option><option value="<>">不等于</option><option value=">">大于</option><option value="<">小于</option><option value=">=">开始于</option><option value="<=">结束于</option></select></td>';
                trHtml += '<td><input id="fieldValue" name="fieldValue" value="' + fieldValue + '" type="text" autocomplete="off" /></td>';

                trHtml += '<td><span class="btn-del" onclick="delTr(this);"><i class="glyphicon glyphicon-trash"></i></span></td>';
                $(".table-warp>table").append(trHtml);
            } else {
                var trL = $(".table-warp>table>tbody>tr").length;
                trHtml += '<tr><td>' + trL + '</td>';
                trHtml += '<td><select id="fieldName' + trL + '" name="fieldName' + trL + '"><option value = "学校"> 学校</option><option value="专业">专业</option><option value="学位">学位</option></select ></td>';
                trHtml += '<td><select id="fieldOperate' + trL + '" name="fieldOperate' + trL + '"><option value="="> 等于</option><option value="<>">不等于</option><option value=">">大于</option><option value="<">小于</option><option value=">=">开始于</option><option value="<=">结束于</option></select></td>';
                trHtml += '<td><input id="fieldValue" name="fieldValue" type="text" autocomplete="off" /></td>';

                trHtml += '<td><span class="btn-del" onclick="delTr(this);"><i class="glyphicon glyphicon-trash"></i></span></td>';
                $(".table-warp>table").append(trHtml);
            }
        }
        //删除表格行
        function delTr(a) {
            $(a).parents("tr").remove();
            var trL = $(".table-warp>table>tbody>tr").length;
            $(".table-warp>table>tbody>tr").each(function (i) {
                if (i > 0) {
                    $(this).children("td").eq(0).html(i);
                }
            })
        }
    </script>
}